<script setup lang="ts">
import { ref, onUpdated } from 'vue'
import $ from 'jquery'
import { copyToClipboard } from '../util/ClipboardUti'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

defineProps<{
    money: string,
    platformInformationData: any
}>()

const emit = defineEmits(['payment-successed'])

onUpdated(() => {
    $('[data-toggle="tooltip"]').tooltip()
})

const initBorderStyle = 'border-light'
const initIcon = ['far', 'circle']

const selectBorderStyle = 'border-info shadow'
const selectIcon = ['far', 'check-circle']

const paymentSelect = ref([
    {
        borderStyle: initBorderStyle,
        icon: initIcon,
        selected: false
    },
    {
        borderStyle: initBorderStyle,
        icon: initIcon,
        selected: false
    },
    {
        borderStyle: initBorderStyle,
        icon: initIcon,
        selected: false
    }
])

const enterPaymentSelect = (index: number) => {
    // 如果有选中的，就不选中了
    const selectedEle = paymentSelect.value.filter((ps) => {
        return ps.selected
    })

    if (selectedEle.length <= 0) {
        paymentSelect.value[index].borderStyle = selectBorderStyle
        paymentSelect.value[index].icon = selectIcon
    }

}

const leavePaymentSelect = (index: number) => {
    // 如果有选中的，就不选中了
    const selectedEle = paymentSelect.value.filter((ps) => {
        return ps.selected
    })

    if (selectedEle.length <= 0) {
        paymentSelect.value[index].borderStyle = initBorderStyle
        paymentSelect.value[index].icon = initIcon
    }

}

const okPaymentSelect = (index: number) => {
    if (alipaySuccess.value || wxPaySuccess.value) {
        return
    }

    stopTime();

    for (let i = 0; i < paymentSelect.value.length; i++) {
        if (i != index) {
            paymentSelect.value[i].selected = false
            paymentSelect.value[i].borderStyle = initBorderStyle
            paymentSelect.value[i].icon = initIcon
        }
    }

    paymentSelect.value[index].selected = !paymentSelect.value[index].selected
    if (paymentSelect.value[index].selected) {
        paymentSelect.value[index].selected = true
        paymentSelect.value[index].borderStyle = selectBorderStyle
        paymentSelect.value[index].icon = selectIcon
        if (index == 1 || index == 2) {
            startTime()
        }
    } else {
        paymentSelect.value[index].selected = false
        paymentSelect.value[index].borderStyle = initBorderStyle
        paymentSelect.value[index].icon = initIcon
    }
}

const copyContent = (id: string) => {
    copyToClipboard("测试")
    $('#' + id).attr('data-original-title', '复制成功').tooltip('show')
    $('#' + id).attr('data-original-title', '复制到剪切板')
}

const alipayLogoImg = ref('/img/alipay.png')
const wxLogoImg = ref('/img/wxpay.png')

const alipaySuccess = ref(false)
const wxPaySuccess = ref(false)

const count = 7 //间隔函数，1秒执行
let curCount = 0 //当前剩余秒数
let interValObj: any

function startTime() {
    curCount = count
    interValObj = window.setInterval(setRemainTime, 1000)
}

function stopTime() {
    if (interValObj) {
        window.clearInterval(interValObj)
    }

}

function setRemainTime() {
    if (curCount === 0) {
        window.clearInterval(interValObj) //停止计时器
        if (paymentSelect.value[1].selected) {
            alipaySuccess.value = true
            startClosePaymentTime()
        } else if (paymentSelect.value[2].selected) {
            wxPaySuccess.value = true
            startClosePaymentTime()
        }
    } else {
        curCount--
    }
}

const cancelPayment = () => {
    stopTime()
    $('#paymentModal').modal('hide')
}

const closePaymentBtn = ref('')

const closePaymentTime = 4 //间隔函数，1秒执行
let curClosePaymentTime = 0 //当前剩余秒数
let closePaymentInterValObj: any

function startClosePaymentTime() {
    curClosePaymentTime = closePaymentTime
    closePaymentBtn.value = '窗口将在' + curClosePaymentTime + '秒后，自动关闭'
    closePaymentInterValObj = window.setInterval(setClosePaymentTime, 1000)
}

function setClosePaymentTime() {
    if (curClosePaymentTime === 0) {
        window.clearInterval(closePaymentInterValObj) //停止计时器
        closePaymentBtn.value = ''
        paymentFinish()
    } else {
        curClosePaymentTime--
        closePaymentBtn.value = '窗口将在' + curClosePaymentTime + '秒后，自动关闭'
    }
}

function paymentFinish() {
    $('#paymentModal').modal('hide')
    emit('payment-successed')
}
</script>

<template>
    <div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="paymentModalLabel">选择支付方式</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-4 border rounded p-2" :class="paymentSelect[0].borderStyle"
                            @mouseenter="enterPaymentSelect(0)" @mouseleave="leavePaymentSelect(0)"
                            @click="okPaymentSelect(0)" style="cursor: default;">
                            <div class="row">
                                <div class="col-md-3 text-center">
                                    <font-awesome-icon :icon="paymentSelect[0].icon" />
                                </div>
                                <div class="col-md-9">
                                    <span class="font-weight-bold"><font-awesome-icon icon="dove"
                                            class="mr-1" />大额支付</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-4 border rounded p-2" :class="paymentSelect[1].borderStyle"
                            @mouseenter="enterPaymentSelect(1)" @mouseleave="leavePaymentSelect(1)"
                            @click="okPaymentSelect(1)" style="cursor: default;">
                            <div class="row">
                                <div class="col-md-3 text-center">
                                    <font-awesome-icon :icon="paymentSelect[1].icon" />
                                </div>
                                <div class="col-md-9">
                                    <img src="/img/alipay-full.png" class="img-fluid" alt="支付宝" style="height: 2rem;">
                                </div>
                            </div>
                        </div>
                        <div class="col-4 border rounded p-2" :class="paymentSelect[2].borderStyle"
                            @mouseenter="enterPaymentSelect(2)" @mouseleave="leavePaymentSelect(2)"
                            @click="okPaymentSelect(2)" style="cursor: default;">
                            <div class="row">
                                <div class="col-md-3 text-center">
                                    <font-awesome-icon :icon="paymentSelect[2].icon" />
                                </div>
                                <div class="col-md-9">
                                    <img src="/img/wxpay-full.png" class="img-fluid mr-2" alt="微信"
                                        style="height: 2rem;">
                                </div>
                            </div>
                        </div>
                        <div class="col-12 mt-3"
                            v-if="paymentSelect[0].selected || paymentSelect[1].selected || paymentSelect[2].selected"
                            :class="!paymentSelect[0].selected ? 'text-center' : ''">
                            <h4>金额：{{ money }}元</h4>
                        </div>
                        <div class="col-12" v-if="paymentSelect[0].selected">
                            <div class="row">
                                <div class="col-md-4 col-lg-2">
                                    <span class="font-weight-bold">组织名称：</span>
                                </div>
                                <div class="col-md-8 col-lg-10 mb-2">
                                    {{ platformInformationData.companyName }} <button type="button"
                                        class="btn btn-white btn-sm" @click="copyContent('copyCompanyName')"
                                        data-toggle="tooltip" data-placement="top" title="复制到剪切板"
                                        id="copyCompanyName"><font-awesome-icon :icon="['far', 'clone']" /></button>
                                </div>
                                <div class="col-md-4 col-lg-2">
                                    <span class="font-weight-bold">开户银行：</span>
                                </div>
                                <div class="col-md-8 col-lg-10 mb-2">
                                    {{ platformInformationData.bank }} <button type="button"
                                        class="btn btn-white btn-sm" @click="copyContent('copyBank')"
                                        data-toggle="tooltip" data-placement="top" title="复制到剪切板"
                                        id="copyBank"><font-awesome-icon :icon="['far', 'clone']" /></button>
                                </div>
                                <div class="col-md-4 col-lg-2">
                                    <span class="font-weight-bold">账户编码：</span>
                                </div>
                                <div class="col-md-8 col-lg-10 mb-2">
                                    {{ platformInformationData.bankAccount }} <button type="button"
                                        class="btn btn-white btn-sm" @click="copyContent('copyBankAccount')"
                                        data-toggle="tooltip" data-placement="top" title="复制到剪切板"
                                        id="copyBankAccount"><font-awesome-icon :icon="['far', 'clone']" /></button>
                                </div>
                                <div class="col-md-4 col-lg-2">
                                    <span class="font-weight-bold">负责人：</span>
                                </div>
                                <div class="col-md-8 col-lg-10 mb-2">
                                    {{ platformInformationData.responsiblePerson }} <button type="button"
                                        class="btn btn-white btn-sm" @click="copyContent('copyUser')"
                                        data-toggle="tooltip" data-placement="top" title="复制到剪切板"
                                        id="copyUser"><font-awesome-icon :icon="['far', 'clone']" /></button>
                                </div>
                                <div class="col-md-4 col-lg-2">
                                    <span class="font-weight-bold">联系电话：</span>
                                </div>
                                <div class="col-md-8 col-lg-10 mb-2">
                                    {{ platformInformationData.responsiblePersonPhoneNumber }} <button type="button"
                                        class="btn btn-white btn-sm" @click="copyContent('copyPhoneNumber')"
                                        data-toggle="tooltip" data-placement="top" title="复制到剪切板"
                                        id="copyPhoneNumber"><font-awesome-icon :icon="['far', 'clone']" /></button>
                                </div>
                                <div class="col-md-4 col-lg-2">
                                    <span class="font-weight-bold">邮编：</span>
                                </div>
                                <div class="col-md-8 col-lg-10 mb-2">
                                    {{ platformInformationData.postalCode }} <button type="button"
                                        class="btn btn-white btn-sm" @click="copyContent('copyPostalCode')"
                                        data-toggle="tooltip" data-placement="top" title="复制到剪切板"
                                        id="copyPostalCode"><font-awesome-icon :icon="['far', 'clone']" /></button>
                                </div>
                                <div class="col-md-4 col-lg-2">
                                    <span class="font-weight-bold">地址：</span>
                                </div>
                                <div class="col-md-8 col-lg-10">
                                    {{ platformInformationData.companyAddress }} <button type="button"
                                        class="btn btn-white btn-sm" @click="copyContent('copyAddress')"
                                        data-toggle="tooltip" data-placement="top" title="复制到剪切板"
                                        id="copyAddress"><font-awesome-icon :icon="['far', 'clone']" /></button>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 text-center" v-if="paymentSelect[1].selected">
                            <div class="image-container" v-if="money">
                                <vue-qr id="aliPay" :text="money" :size="248" colorDark="#1e1e20" colorLight="#ffffff"
                                    :logoSrc="alipayLogoImg">
                                </vue-qr>
                                <input type="checkbox" name="alipaySuccessChecked" :checked="alipaySuccess"
                                    style="display: none;">
                                <svg width="208" height="208" class="icon"
                                    :class="alipaySuccess ? 'custome-opacity' : ''">
                                    <circle class="circle" fill="none" transform="rotate(-90 103 100)" stroke="#68E534"
                                        stroke-width="20" cx="100" cy="100" r="90" stroke-linecap="round" />
                                    <polyline class="tick" fill="none" stroke="#68E534" stroke-width="12"
                                        points="52,105 103,142 150,71" stroke-linecap="round" stroke-linejoin="round">
                                    </polyline>
                                </svg>
                                <h3 class="tip text-success">支付成功</h3>
                            </div>

                        </div>
                        <div class="col-12 text-center" v-if="paymentSelect[2].selected">
                            <div class="image-container" v-if="money">
                                <vue-qr id="wxPay" :text="money" :size="248" colorDark="#1e1e20" colorLight="#ffffff"
                                    :logoSrc="wxLogoImg">
                                </vue-qr>
                                <input type="checkbox" name="wxSuccessChecked" :checked="wxPaySuccess"
                                    style="display: none;">
                                <svg width="208" height="208" class="icon"
                                    :class="wxPaySuccess ? 'custome-opacity' : ''">
                                    <circle class="circle" fill="none" transform="rotate(-90 103 100)" stroke="#68E534"
                                        stroke-width="20" cx="100" cy="100" r="90" stroke-linecap="round" />
                                    <polyline class="tick" fill="none" stroke="#68E534" stroke-width="12"
                                        points="52,105 103,142 150,71" stroke-linecap="round" stroke-linejoin="round">
                                    </polyline>
                                </svg>
                                <h3 class="tip text-success">支付成功</h3>
                            </div>
                        </div>
                        <div class="col-12 mt-5"
                            v-if="paymentSelect[0].selected || paymentSelect[1].selected || paymentSelect[2].selected"
                            :class="!paymentSelect[0].selected ? 'text-center' : ''">
                            <p>捐赠不分多少，爱心无价，传递正能量。</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <p v-if="alipaySuccess || wxPaySuccess">{{ closePaymentBtn }}</p>
                    <button type="button" class="btn btn-secondary" @click="cancelPayment"
                        v-if="!alipaySuccess && !wxPaySuccess">取消支付</button>
                    <button type="button" class="btn btn-success" @click="paymentFinish"
                        v-if="paymentSelect[0].selected">确认支付</button>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.tip {
    font-family: Helvetica;
    margin-top: 40px;
    font-size: 36px;
    opacity: 0;
}

.circle {
    stroke-dasharray: 1194;
    stroke-dashoffset: 1194;
}

.tick {
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
}

input[name="alipaySuccessChecked"]:checked+svg .circle,
input[name="wxSuccessChecked"]:checked+svg .circle {
    animation: circle 1s ease-in-out forwards;
}

input[name="alipaySuccessChecked"]:checked+svg .tick,
input[name="wxSuccessChecked"]:checked+svg .tick {
    animation: tick 0.8s 0.95s ease-in-out forwards;
}

input[name="alipaySuccessChecked"]:checked~h3,
input[name="wxSuccessChecked"]:checked~h3 {
    animation: title 0.6s 1.2s ease-in-out forwards;
}

@keyframes circle {
    from {
        stroke-dashoffset: 1194;
    }

    to {
        stroke-dashoffset: 2388;
    }
}

@keyframes tick {
    from {
        stroke-dashoffset: 350;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes title {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
    /* Remove any default spacing below the image */
}

.image-container .icon {
    position: absolute;
    top: 20px;
    left: 20px;
}

.image-container .custome-opacity {
    background: white;
    opacity: 0.8;
}

.image-container .tip {
    position: absolute;
    top: 193px;
    left: 49px;
}
</style>